<template>
<div class="mentorSituation">
  <!-- 导航栏 -->
    <div class="studentSituation-header" v-if="!isDetailPage">
      <RouterLink to="/mentor/mentorSituation/mSituationProceed" active-class="studentSituation-header-active">进行中</RouterLink>
      <RouterLink to="/mentor/mentorSituation/mSituationFinish" active-class="studentSituation-header-active">已结束</RouterLink>
    </div>
    <div class="studentSituation-main" v-if="!isDetailPage">
      <RouterView></RouterView>
    </div>
    <div class="studentSituation2-main" v-if="isDetailPage">
      <RouterView></RouterView>
    </div>
</div>
</template>

<script setup>
import { useRoute } from 'vue-router'
import { computed } from 'vue'

const route = useRoute()
const isDetailPage = computed(() => {
  return route.name === 'mSituationDetail'
  })
</script>

<style scoped lang="scss">
.mentorSituation {
  width: 100%;
  height: 100%;
  background-color: #f0f2f5;
  display: flex;
  flex-direction: column;
  
  .studentSituation-header {
    width: 100%;
    height: 10vh;
    display: flex;
    align-items: center;
    padding-left: 60px;
    border-top: 1px solid #c9c9ca;
    border-bottom: 1px solid #c9c9ca;
    background-color: #fff;
    a {
      font-size: 25px;
      height: 100%;
      margin: 20px;
      line-height: 10vh;
    }
    .studentSituation-header-active {
      border-bottom: 5px solid #4c5fbc;
      transition: all 0.2s;
    }
  }

  .studentSituation-main {
    flex: 1;
    padding: 50px;
  }
  .studentSituation2-main {
    flex: 1;
  }
}
</style>